import React, { Component } from 'react';
import './index.scss';
import { Flex } from 'antd-mobile';
import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';

class SearchHeader extends Component {

  static propTypes = {
    cityName: PropTypes.string.isRequired
  }

  render() {
    const { history, cityName, className } = this.props;
    return (
      <Flex className={"search-box " + (className || '')}>
        <Flex className="search">
          {/* 位置 */}
          <div className="location" onClick={() => history.push('/citylist')}>
            <span className="name">{cityName}</span>
            <span className="iconfont icon-arrow"></span>
          </div>
          {/* 表单 */}
          <div className="form" onClick={() => history.push('/search')}>
            <span className="iconfont icon-seach"></span>
            <span className="text">请输入小区或地址</span>
          </div>
        </Flex>
        <span className="iconfont icon-map" onClick={() => history.push('/map')} />
      </Flex>
    )
  }
}
export default withRouter(SearchHeader);